<template>
  <div :class="['hccard', `hccard-${size}`, `color-${type}`, shadow ? 'hcard--shadow' : '']">
    <div v-if="title || showHeader" :class="['hccard-head', title && !hideBd ? '' : 'hccard-head-hiden']">
      <span @click="choose(1)" :class="[active == 1 ? '' : 'smallTitle']">{{ title }}</span>
      <span @click="choose(2)" :class="[active == 2 ? '' : 'smallTitle']">{{ smallTitle }}</span>
      <slot name="que"></slot>
      <div class="hccard-right">
        <span @click="$emit('more')" v-if="rightType == 'more'" class="hccard-more">
          <slot name="rightMsg">更多 <a-icon class="hccard-more-icon" type="right" /></slot>
        </span>
        <span @click="$emit('more')" v-else-if="rightType == 'add'" class="hccard-more">
          <slot name="rightMsg"><a-icon class="hccard-more-icon" type="plus" /> 添加</slot>
        </span>
        <a-button class="pz-btn" @click="$emit('more')" v-else-if="rightType == 'button'" type="primary">
          <slot name="rightMsg"><a-icon type="setting" />配置</slot>
        </a-button>
        <slot v-else name="right"></slot>
      </div>
    </div>
    <slot></slot>
  </div>
</template>
<script>
export default {
  name: 'HCcard',
  props: {
    shadow: {
      type: Boolean,
      default: false
    },
    showHeader: {
      type: Boolean,
      default: false
    },
    size: {
      type: String,
      default: 'default'
    },
    url: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: 'default'
    },
    title: {
      type: String,
      default: ''
    },
    smallTitle: {
      type: String,
      default: ''
    },
    rightType: {
      type: String,
      default: ''
    },
    hideBd: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      active: 1
    };
  },
  methods: {
    choose(index) {
      this.active = index;
      this.$emit('changeTab', index);
    }
  }
};
</script>
<style lang="less">
.hccard {
  background: #FFFFFF;
  border-radius: 10px;
  // display: inline-block;
  padding: 24px;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  &.hcard--shadow {
    box-shadow: 0px 0px 20px 0px rgba(20,15,41,0.1000);
  }
  .hccard-head{
    position: relative;
  }
  &.hccard-large {
    padding: 30px 40px;
    border-radius: 20px;
    .hccard-head {
      > span {
        font-size: 20px;
      }
      &::before {
        height: 18px;
        top: 1px;
      }
    }
  }
  .hccard-head-hiden {
    &::before {
      display: none;
    }
     > span {
      margin-left: 0 !important;
     }
  }
  .hccard-head {
    position: relative;
    margin-bottom: 24px;
    > span {
      margin-left: 12px;
      font-size: 17px;
      font-weight: 500;
      color: #333;
      line-height: 17px;
      cursor: pointer;
      &.smallTitle {
        font-size: 14px;
        font-weight: 400;
        color: #999999;
      }
    }
    &::before {
      content: " ";
      width: 3px;
      height: 14px;
      background: #1F3B8A;
      border-radius: 1px;
      position: absolute;
      top: 3px;
    }
  }
  .hccard-right {
    position: absolute;
    right: 0;
    top: 0px;
    cursor: pointer;
    transition: all 0.3s;
    &:hover {
      .hccard-more,.hccard-more-icon {
        color: #132d74;
      }
    }
    .hccard-more {
      font-size: 14px;
      font-weight: 400;
      color: #1F3B8A;
    }
    .hccard-more-icon {
      font-size: 12px;
      transform: translate(0, -1px);
    }
  }
  .pz-btn {
    margin-top: -16px;
  }
}
</style>
